<script lang="ts" setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import TeamCardList from "../components/TeamCardList.vue";
import {showFailToast} from "vant";
import myAxios from "../plugins/myAxios.js";


const active = ref('public');
const router = useRouter();
const searchText = ref('');


/**
 * 标签查询状态
 * @param name
 */
const onTabChange = (name) => {
  //  查公开
  if (name === 'public') {
    listTeam(searchText.value,0);
  }else{
    //  查加密
    listTeam(searchText.value,2);
  }
}

//  跳转到加入队伍页
const toAddTeam = () => {
  router.push({
    path: "/team/add"
  })
}


const teamList = ref([]);


/**
 * 搜索队伍
 * @param val
 * @param status
 */
const listTeam = async (val = '', status = 0) => {
  const res = await myAxios.get("/team/list", {
    params: {
      searchText: val,
      pageNum: 1,
      status,
    }
  });
  if (res?.code === 0) {
    teamList.value = res.data;
  } else {
    showFailToast("加载队伍失败，请刷新后尝试");
  }
}


//  页面加载时只触发一次
onMounted(async () => {
  listTeam();
})
const onSearch = (val) => {
  listTeam(val);
};

</script>

<template>
  <div id="teamPage">
    <van-search v-model="searchText" placeholder="搜索队伍" @search="onSearch"/>
    <van-tabs v-model:active="active">
      <van-tab title="公开" name="public" @change="onTabChange">公开</van-tab>
      <van-tab title="加密" name="private">加密</van-tab>
    </van-tabs>
    <van-button type="primary" class="add-button" icon="plus" @click="toAddTeam" />
    <team-card-list :teamList="teamList"/>
    <van-empty v-if="teamList?.length<1" description="数据为空"/>
  </div>

</template>

<style scoped>

</style>